/**
 * 用户认证系统前端应用
 * 使用Vue 3 Composition API
 *
 * @author Your Name
 * @version 1.0.0
 */

// 引入配置文件
import { API_BASE_URL } from './config.js';
import { createApp, ref, computed, onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

// 创建Vue应用
const app = createApp({
    setup() {
        // 响应式数据
        const activeTab = ref('login');
        const loginForm = ref({
            username: '',
            password: ''
        });
        const loginErrors = ref({
            username: '',
            password: ''
        });
        const registerForm = ref({
            username: '',
            password: '',
            confirmPassword: '',
            email: '',
            captcha: ''
        });
        const registerErrors = ref({
            username: '',
            password: '',
            confirmPassword: '',
            email: '',
            captcha: ''
        });
        const emailLoginForm = ref({
            email: '',
            code: ''
        });
        const emailLoginErrors = ref({
            email: '',
            code: ''
        });
        const message = ref('');
        const messageType = ref(''); // success, danger, warning, info
        const isLoading = ref(false);
        const currentUser = ref(null);
        const captchaData = ref({
            id: '',
            image: ''
        });
        const isSendingCode = ref(false);
        const codeCountdown = ref(0);
        const codeTimer = ref(null);

        // 计算属性
        const passwordStrength = computed(() => {
            const password = registerForm.value.password;
            if (!password) return { text: '', class: '', width: '0%' };

            let strength = 0;
            let text = '';
            let colorClass = '';

            if (password.length >= 6) strength += 33;
            if (/[A-Za-z]/.test(password)) strength += 33;
            if (/\d/.test(password)) strength += 34;

            if (strength <= 33) {
                text = '弱';
                colorClass = 'text-danger';
            } else if (strength <= 66) {
                text = '中';
                colorClass = 'text-warning';
            } else {
                text = '强';
                colorClass = 'text-success';
            }

            return {
                text: text,
                class: colorClass,
                width: `${strength}%`
            };
        });

        // 表单验证函数
        const validateLoginForm = () => {
            let isValid = true;
            
            // 重置错误信息
            loginErrors.value.username = '';
            loginErrors.value.password = '';
            
            // 验证用户名
            if (!loginForm.value.username.trim()) {
                loginErrors.value.username = '请输入用户名';
                isValid = false;
            } else if (loginForm.value.username.trim().length < 3) {
                loginErrors.value.username = '用户名至少3个字符';
                isValid = false;
            }
            
            // 验证密码
            if (!loginForm.value.password.trim()) {
                loginErrors.value.password = '请输入密码';
                isValid = false;
            }
            
            return isValid;
        };
        
        const validateRegisterForm = () => {
            let isValid = true;
            
            // 重置错误信息
            registerErrors.value.username = '';
            registerErrors.value.password = '';
            registerErrors.value.confirmPassword = '';
            registerErrors.value.email = '';
            registerErrors.value.captcha = '';
            
            // 验证用户名
            if (!registerForm.value.username.trim()) {
                registerErrors.value.username = '请输入用户名';
                isValid = false;
            } else if (registerForm.value.username.trim().length < 3) {
                registerErrors.value.username = '用户名至少3个字符';
                isValid = false;
            }
            
            // 验证密码
            if (!registerForm.value.password.trim()) {
                registerErrors.value.password = '请输入密码';
                isValid = false;
            } else if (registerForm.value.password.length < 6) {
                registerErrors.value.password = '密码至少6位';
                isValid = false;
            } else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(registerForm.value.password)) {
                registerErrors.value.password = '密码需包含字母和数字';
                isValid = false;
            }
            
            // 验证确认密码
            if (!registerForm.value.confirmPassword.trim()) {
                registerErrors.value.confirmPassword = '请确认密码';
                isValid = false;
            } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
                registerErrors.value.confirmPassword = '密码不一致';
                isValid = false;
            }
            
            // 验证邮箱（可选）
            if (registerForm.value.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.value.email)) {
                registerErrors.value.email = '邮箱格式不正确';
                isValid = false;
            }
            
            // 验证验证码
            if (!registerForm.value.captcha.trim()) {
                registerErrors.value.captcha = '请输入验证码';
                isValid = false;
            }
            
            return isValid;
        };
        
        const validateEmailLoginForm = () => {
            let isValid = true;
            
            // 重置错误信息
            emailLoginErrors.value.email = '';
            emailLoginErrors.value.code = '';
            
            // 验证邮箱
            if (!emailLoginForm.value.email.trim()) {
                emailLoginErrors.value.email = '请输入邮箱';
                isValid = false;
            } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailLoginForm.value.email)) {
                emailLoginErrors.value.email = '邮箱格式不正确';
                isValid = false;
            }
            
            // 验证验证码
            if (!emailLoginForm.value.code.trim()) {
                emailLoginErrors.value.code = '请输入验证码';
                isValid = false;
            } else if (emailLoginForm.value.code.length !== 6) {
                emailLoginErrors.value.code = '验证码为6位数字';
                isValid = false;
            }
            
            return isValid;
        };
        
        // 实时验证函数
        const validateLoginField = (field) => {
            if (field === 'username') {
                if (!loginForm.value.username.trim()) {
                    loginErrors.value.username = '请输入用户名';
                } else if (loginForm.value.username.trim().length < 3) {
                    loginErrors.value.username = '用户名至少3个字符';
                } else {
                    loginErrors.value.username = '';
                }
            } else if (field === 'password') {
                if (!loginForm.value.password.trim()) {
                    loginErrors.value.password = '请输入密码';
                } else {
                    loginErrors.value.password = '';
                }
            }
        };
        
        const validateRegisterField = (field) => {
            if (field === 'username') {
                if (!registerForm.value.username.trim()) {
                    registerErrors.value.username = '请输入用户名';
                } else if (registerForm.value.username.trim().length < 3) {
                    registerErrors.value.username = '用户名至少3个字符';
                } else {
                    registerErrors.value.username = '';
                }
            } else if (field === 'password') {
                if (!registerForm.value.password.trim()) {
                    registerErrors.value.password = '请输入密码';
                } else if (registerForm.value.password.length < 6) {
                    registerErrors.value.password = '密码至少6位';
                } else if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(registerForm.value.password)) {
                    registerErrors.value.password = '密码需包含字母和数字';
                } else {
                    registerErrors.value.password = '';
                }
            } else if (field === 'confirmPassword') {
                if (!registerForm.value.confirmPassword.trim()) {
                    registerErrors.value.confirmPassword = '请确认密码';
                } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
                    registerErrors.value.confirmPassword = '密码不一致';
                } else {
                    registerErrors.value.confirmPassword = '';
                }
            } else if (field === 'email') {
                if (registerForm.value.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.value.email)) {
                    registerErrors.value.email = '邮箱格式不正确';
                } else {
                    registerErrors.value.email = '';
                }
            } else if (field === 'captcha') {
                if (!registerForm.value.captcha.trim()) {
                    registerErrors.value.captcha = '请输入验证码';
                } else {
                    registerErrors.value.captcha = '';
                }
            }
        };
        
        const validateEmailLoginField = (field) => {
            if (field === 'email') {
                if (!emailLoginForm.value.email.trim()) {
                    emailLoginErrors.value.email = '请输入邮箱';
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailLoginForm.value.email)) {
                    emailLoginErrors.value.email = '邮箱格式不正确';
                } else {
                    emailLoginErrors.value.email = '';
                }
            } else if (field === 'code') {
                if (!emailLoginForm.value.code.trim()) {
                    emailLoginErrors.value.code = '请输入验证码';
                } else if (emailLoginForm.value.code.length !== 6) {
                    emailLoginErrors.value.code = '验证码为6位数字';
                } else {
                    emailLoginErrors.value.code = '';
                }
            }
        };
        
        const isFormValid = computed(() => {
            if (activeTab.value === 'login') {
                return loginForm.value.username && loginForm.value.password;
            } else if (activeTab.value === 'email-login') {
                return emailLoginForm.value.email && emailLoginForm.value.code.length === 6;
            } else {
                return registerForm.value.username &&
                    registerForm.value.password &&
                    registerForm.value.confirmPassword &&
                    registerForm.value.password === registerForm.value.confirmPassword &&
                    registerForm.value.captcha;
            }
        });

        // 方法
        const showMessage = (text, type = 'info') => {
            message.value = text;
            messageType.value = type;

            // 5秒后自动清除消息
            setTimeout(() => {
                message.value = '';
            }, 5000);
        };

        const clearForms = () => {
            loginForm.value = { username: '', password: '' };
            registerForm.value = {
                username: '',
                password: '',
                confirmPassword: '',
                email: '',
                captcha: ''
            };
            emailLoginForm.value = {
                email: '',
                code: ''
            };
        };
        
        // 获取基础URL的函数
        const getBaseUrl = () => {
            // 使用配置文件中的API_BASE_URL
            return API_BASE_URL;
        };

        // 获取验证码
        const loadCaptcha = async () => {
            try {
                const baseUrl = getBaseUrl();
                const response = await axios.get(baseUrl + '/api/captcha/generate');
                if (response.data.success) {
                    captchaData.value.id = response.data.data.captchaId;
                    captchaData.value.image = response.data.data.captchaImage;
                }
            } catch (error) {
                console.error('获取验证码失败:', error);
                showMessage('获取验证码失败，请刷新页面重试', 'danger');
            }
        };

        // 发送邮箱验证码
        const sendEmailCode = async () => {
            if (!emailLoginForm.value.email.trim()) {
                emailLoginErrors.value.email = '请输入邮箱';
                return;
            }
            
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailLoginForm.value.email)) {
                emailLoginErrors.value.email = '邮箱格式不正确';
                return;
            }
            
            if (codeCountdown.value > 0) return;
            
            isSendingCode.value = true;
            try {
                const baseUrl = getBaseUrl();
                const response = await axios.post(baseUrl + '/api/auth/send-email-code', {
                    email: emailLoginForm.value.email
                });
                
                if (response.data.success) {
                    showMessage('验证码已发送，请查看邮箱', 'success');
                    // 启动倒计时
                    startCodeCountdown();
                } else {
                    showMessage(response.data.message || '验证码发送失败', 'danger');
                }
            } catch (error) {
                console.error('发送验证码错误:', error);
                if (error.response && error.response.data) {
                    showMessage(error.response.data.message || '验证码发送失败', 'danger');
                } else {
                    showMessage('网络错误，请检查连接', 'danger');
                }
            } finally {
                isSendingCode.value = false;
            }
        };

        // 启动验证码倒计时
        const startCodeCountdown = () => {
            codeCountdown.value = 60;
            codeTimer.value = setInterval(() => {
                codeCountdown.value--;
                if (codeCountdown.value <= 0) {
                    clearInterval(codeTimer.value);
                    codeTimer.value = null;
                }
            }, 1000);
        };

        const handleRegister = async () => {
            if (!validateRegisterForm()) return;
            
            isLoading.value = true;
            message.value = '';
            
            try {
                const baseUrl = getBaseUrl();
                const response = await axios.post(baseUrl + '/api/auth/register', {
                    username: registerForm.value.username,
                    password: registerForm.value.password,
                    email: registerForm.value.email || null,
                    captcha: registerForm.value.captcha,
                    captchaId: captchaData.value.id
                });
                
                if (response.data.success) {
                    showMessage('注册成功！请登录', 'success');
                    // 清空表单和错误信息
                    registerForm.value = { username: '', password: '', confirmPassword: '', email: '', captcha: '' };
                    registerErrors.value = { username: '', password: '', confirmPassword: '', email: '', captcha: '' };
                    // 切换到登录页
                    activeTab.value = 'login';
                    // 重新加载验证码
                    await loadCaptcha();
                } else {
                    showMessage(response.data.message || '注册失败', 'danger');
                    // 重新加载验证码
                    await loadCaptcha();
                }
            } catch (error) {
                console.error('注册错误:', error);
                if (error.response && error.response.data) {
                    showMessage(error.response.data.message || '注册失败', 'danger');
                } else {
                    showMessage('网络错误，请检查连接', 'danger');
                }
                // 重新加载验证码
                await loadCaptcha();
            } finally {
                isLoading.value = false;
            }
        };

        const handleLogin = async () => {
            if (!validateLoginForm()) return;
            
            isLoading.value = true;
            message.value = '';
            
            try {
                const baseUrl = getBaseUrl();
                const response = await axios.post(baseUrl + '/api/auth/login', {
                    username: loginForm.value.username,
                    password: loginForm.value.password
                });
                
                if (response.data.success) {
                    showMessage('登录成功！', 'success');
                    currentUser.value = { username: loginForm.value.username };
                    // 清空表单和错误信息
                    loginForm.value = { username: '', password: '' };
                    loginErrors.value = { username: '', password: '' };
                } else {
                    showMessage(response.data.message || '登录失败', 'danger');
                }
            } catch (error) {
                console.error('登录错误:', error);
                if (error.response && error.response.data) {
                    showMessage(error.response.data.message || '登录失败', 'danger');
                } else {
                    showMessage('网络错误，请检查连接', 'danger');
                }
            } finally {
                isLoading.value = false;
            }
        };

        const handleEmailLogin = async () => {
            if (!validateEmailLoginForm()) return;
            
            isLoading.value = true;
            message.value = '';
            
            try {
                const baseUrl = getBaseUrl();
                const response = await axios.post(baseUrl + '/api/auth/email-login', {
                    email: emailLoginForm.value.email,
                    code: emailLoginForm.value.code
                });
                
                if (response.data.success) {
                    showMessage('登录成功！', 'success');
                    currentUser.value = { 
                        username: response.data.data.username,
                        email: response.data.data.email
                    };
                    // 清空表单和错误信息
                    emailLoginForm.value = { email: '', code: '' };
                    emailLoginErrors.value = { email: '', code: '' };
                    // 重置倒计时
                    if (codeTimer.value) {
                        clearInterval(codeTimer.value);
                        codeTimer.value = null;
                    }
                    codeCountdown.value = 0;
                } else {
                    showMessage(response.data.message || '登录失败', 'danger');
                }
            } catch (error) {
                console.error('邮箱登录错误:', error);
                if (error.response && error.response.data) {
                    showMessage(error.response.data.message || '登录失败', 'danger');
                } else {
                    showMessage('网络错误，请检查连接', 'danger');
                }
            } finally {
                isLoading.value = false;
            }
        };

        const handleApiError = (error, operation) => {
            if (error.response && error.response.data) {
                const errorData = error.response.data;
                showMessage(`${operation}失败: ${errorData.message}`, 'danger');
            } else if (error.request) {
                showMessage(`${operation}失败: 无法连接到服务器，请检查网络连接`, 'danger');
            } else {
                showMessage(`${operation}失败: ${error.message}`, 'danger');
            }
        };

        const switchTab = (tab) => {
            activeTab.value = tab;
            message.value = ''; // 切换标签页时清空消息
            
            // 切换到注册页时加载验证码
            if (tab === 'register') {
                loadCaptcha();
            }
        };

        const checkServerHealth = async () => {
            try {
                const baseUrl = getBaseUrl();
                await axios.get(baseUrl + '/api/auth/health');
                console.log('服务器连接正常');
            } catch (error) {
                console.warn('服务器连接失败，请确保后端服务正在运行');
            }
        };

        // 生命周期钩子
        onMounted(() => {
            checkServerHealth();
        });

        // 组件销毁前清理定时器
        const beforeUnmount = () => {
            if (codeTimer.value) {
                clearInterval(codeTimer.value);
            }
        };

        return {
            activeTab,
            loginForm,
            loginErrors,
            registerForm,
            registerErrors,
            emailLoginForm,
            emailLoginErrors,
            message,
            messageType,
            isLoading,
            currentUser,
            passwordStrength,
            isFormValid,
            handleRegister,
            handleLogin,
            handleEmailLogin,
            switchTab,
            showMessage,
            validateLoginField,
            validateRegisterField,
            validateEmailLoginField,
            captchaData,
            loadCaptcha,
            sendEmailCode,
            isSendingCode,
            codeCountdown,
            getBaseUrl,
            window: window
        };
    },

    template: `
        <div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center">
            <div class="auth-container">
                <!-- 应用标题 -->
                <h1 class="app-title">
                    <i class="fas fa-user-shield me-2"></i>
                    用户认证系统
                </h1>
                <p class="text-center text-muted mb-4">
                    安全可靠的用户认证服务
                </p>
                
                <!-- 消息提示 -->
                <div v-if="message" :class="['alert', 'alert-' + messageType, 'mb-4']">
                    <i :class="{
                        'fas fa-check-circle': messageType === 'success',
                        'fas fa-exclamation-triangle': messageType === 'warning',
                        'fas fa-exclamation-circle': messageType === 'danger',
                        'fas fa-info-circle': messageType === 'info'
                    }" class="me-2"></i>
                    {{ message }}
                </div>

                <!-- 用户欢迎信息 -->
                <div v-if="currentUser" class="alert alert-success mb-4">
                    <i class="fas fa-user-check me-2"></i>
                    当前用户: <strong>{{ currentUser.username }} {{ currentUser.email ? '(' + currentUser.email + ')' : '' }}</strong>
                </div>

                <!-- 标签页导航 -->
                <ul class="nav nav-tabs nav-justified">
                    <li class="nav-item">
                        <a class="nav-link" :class="{ active: activeTab === 'login' }" 
                           @click="switchTab('login')">
                            <i class="fas fa-sign-in-alt me-1"></i>用户登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" :class="{ active: activeTab === 'email-login' }" 
                           @click="switchTab('email-login')">
                            <i class="fas fa-envelope me-1"></i>邮箱登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" :class="{ active: activeTab === 'register' }" 
                           @click="switchTab('register')">
                            <i class="fas fa-user-plus me-1"></i>用户注册
                        </a>
                    </li>
                </ul>

                <!-- 用户名密码登录表单 -->
                <div v-if="activeTab === 'login'" class="tab-content">
                    <form @submit.prevent="handleLogin">
                        <div class="mb-3">
                            <label class="form-label fw-bold">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" class="form-control" 
                                       :class="{ 'is-invalid': loginErrors.username }"
                                       v-model="loginForm.username" 
                                       @input="validateLoginField('username')"
                                       @blur="validateLoginField('username')"
                                       placeholder="请输入用户名" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="loginErrors.username" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ loginErrors.username }}
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="form-control" 
                                       :class="{ 'is-invalid': loginErrors.password }"
                                       v-model="loginForm.password" 
                                       @input="validateLoginField('password')"
                                       @blur="validateLoginField('password')"
                                       placeholder="请输入密码" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="loginErrors.password" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ loginErrors.password }}
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100" 
                                :disabled="isLoading || !isFormValid">
                            <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
                            <i v-else class="fas fa-sign-in-alt me-2"></i>
                            {{ isLoading ? '登录中...' : '登录系统' }}
                        </button>
                    </form>
                </div>

                <!-- 邮箱验证码登录表单 -->
                <div v-if="activeTab === 'email-login'" class="tab-content">
                    <form @submit.prevent="handleEmailLogin">
                        <div class="mb-3">
                            <label class="form-label fw-bold">邮箱</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-envelope"></i>
                                </span>
                                <input type="email" class="form-control" 
                                       :class="{ 'is-invalid': emailLoginErrors.email }"
                                       v-model="emailLoginForm.email" 
                                       @input="validateEmailLoginField('email')"
                                       @blur="validateEmailLoginField('email')"
                                       placeholder="请输入邮箱" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="emailLoginErrors.email" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ emailLoginErrors.email }}
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">验证码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-key"></i>
                                </span>
                                <input type="text" class="form-control" 
                                       :class="{ 'is-invalid': emailLoginErrors.code }"
                                       v-model="emailLoginForm.code" 
                                       @input="validateEmailLoginField('code')"
                                       @blur="validateEmailLoginField('code')"
                                       placeholder="请输入6位验证码" 
                                       required
                                       :disabled="isLoading"
                                       maxlength="6">
                                <button class="btn btn-outline-secondary" 
                                        type="button" 
                                        @click="sendEmailCode"
                                        :disabled="isSendingCode || codeCountdown > 0 || !emailLoginForm.email">
                                    <span v-if="isSendingCode" class="spinner-border spinner-border-sm"></span>
                                    <span v-else-if="codeCountdown > 0">{{ codeCountdown }}秒后重发</span>
                                    <span v-else>发送验证码</span>
                                </button>
                            </div>
                            <div v-if="emailLoginErrors.code" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ emailLoginErrors.code }}
                            </div>
                            <div class="form-text">请输入邮箱中收到的6位验证码</div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100" 
                                :disabled="isLoading || !isFormValid">
                            <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
                            <i v-else class="fas fa-sign-in-alt me-2"></i>
                            {{ isLoading ? '登录中...' : '登录系统' }}
                        </button>
                    </form>
                </div>

                <!-- 注册表单 -->
                <div v-if="activeTab === 'register'" class="tab-content">
                    <form @submit.prevent="handleRegister">
                        <div class="mb-3">
                            <label class="form-label fw-bold">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" class="form-control" 
                                       :class="{ 'is-invalid': registerErrors.username }"
                                       v-model="registerForm.username" 
                                       @input="validateRegisterField('username')"
                                       @blur="validateRegisterField('username')"
                                       placeholder="至少3个字符" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="registerErrors.username" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ registerErrors.username }}
                            </div>
                            <div class="form-text">用户名长度3-50个字符，且不能重复</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">邮箱</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-envelope"></i>
                                </span>
                                <input type="email" class="form-control" 
                                       :class="{ 'is-invalid': registerErrors.email }"
                                       v-model="registerForm.email" 
                                       @input="validateRegisterField('email')"
                                       @blur="validateRegisterField('email')"
                                       placeholder="可选填写"
                                       :disabled="isLoading">
                            </div>
                            <div v-if="registerErrors.email" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ registerErrors.email }}
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="form-control" 
                                       :class="{ 'is-invalid': registerErrors.password }"
                                       v-model="registerForm.password" 
                                       @input="validateRegisterField('password')"
                                       @blur="validateRegisterField('password')"
                                       placeholder="至少6位，包含字母和数字" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="registerErrors.password" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ registerErrors.password }}
                            </div>
                            <div class="form-text">
                                <div class="password-strength" :class="passwordStrength.class">
                                    密码强度: {{ passwordStrength.text }}
                                </div>
                                <div class="progress mt-1" style="height: 5px;">
                                    <div class="progress-bar" 
                                         :class="passwordStrength.class.replace('text-', 'bg-')"
                                         :style="{ width: passwordStrength.width }">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">确认密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="form-control" 
                                       :class="{ 'is-invalid': registerErrors.confirmPassword }"
                                       v-model="registerForm.confirmPassword" 
                                       @input="validateRegisterField('confirmPassword')"
                                       @blur="validateRegisterField('confirmPassword')"
                                       placeholder="请再次输入密码" 
                                       required
                                       :disabled="isLoading">
                            </div>
                            <div v-if="registerErrors.confirmPassword" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ registerErrors.confirmPassword }}
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">验证码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-shield-alt"></i>
                                </span>
                                <input type="text" class="form-control" 
                                       :class="{ 'is-invalid': registerErrors.captcha }"
                                       v-model="registerForm.captcha" 
                                       @input="validateRegisterField('captcha')"
                                       @blur="validateRegisterField('captcha')"
                                       placeholder="请输入验证码" 
                                       required
                                       :disabled="isLoading">
                                <span class="input-group-text p-0">
                                    <img :src="captchaData.image" alt="验证码" 
                                         style="height: 38px; cursor: pointer;"
                                         @click="loadCaptcha">
                                </span>
                            </div>
                            <div v-if="registerErrors.captcha" class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-circle me-1"></i>{{ registerErrors.captcha }}
                            </div>
                            <div class="form-text">点击图片刷新验证码</div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100" 
                                :disabled="isLoading || !isFormValid">
                            <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
                            <i v-else class="fas fa-user-plus me-2"></i>
                            {{ isLoading ? '注册中...' : '注册账号' }}
                        </button>
                    </form>
                </div>
                
                <!-- 页脚信息 -->
                <div class="mt-4 text-center">
                    <small class="text-muted">
                        &copy; 2024 用户认证系统 - 安全可靠的认证服务
                    </small>
                </div>
            </div>
        </div>
    `
});

// 挂载应用到DOM
app.mount('#app');